<template>
	<div class="login-container">
		<div class="login-box flexrcc">
			<div class="login-left flexccc">
				<!-- <div class="flexrbc left-title">
					<img src="@/assets/images/login/logo.png" alt="">
					<div>AR智慧运维</div>
				</div>  
				<div class="left-intro">AR巡检·远程互联·守护运营每一天</div> -->
			</div>
			<div class="login-right flexccc">
				<div class="login-form  normal-login-form">
					<div class="rightBox"> 登录 </div>
					<div class="contentTitle">
						<el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="demo-ruleForm">
							<el-form-item prop="username">
								<el-input v-model="loginForm.username" @input="changeUser"
									:onkeyup="loginForm.username= loginForm.username.replace(/[ ]/g,'')"
									placeholder="请输入账号">
									<img slot="prefix" src="../../assets/images/login/user.png" alt="" />
								</el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input v-model="loginForm.password" @input="changeUser"
									:onkeyup="loginForm.password= loginForm.password.replace(/[ ]/g,'')" :type="passw"
									placeholder="请输入密码">
									<svg-icon slot="prefix" icon-class="password"></svg-icon>
									<!-- <img slot="prefix" src="../../assets/images/login/password.png" alt="" /> -->
									<svg-icon slot="suffix" icon-class="passwordShow" @click="showPass"
										v-if="passwordShow"></svg-icon>
									<!-- <img slot="suffix" src="@/assets/images/login/password-show.png" @click="showPass"
										v-if="passwordShow" /> -->
									<svg-icon slot="suffix" icon-class="passwordHidden" @click="showPass"
										v-else></svg-icon>
									<!-- <img slot="suffix" src="@/assets/images/login/password-hidden.png" @click="showPass"
										v-else /> -->
								</el-input>
							</el-form-item>

							<div class="boxTbale flexrcc" v-if="showImagFlag==false" @click="handleLogins(1)">

								<img src="../../assets/images/codeData.png" alt="">
								<span> 验证 </span>
							</div>
							<div class="boxTbales flexrcc" v-if="showImagFlag==true">
								<img src="../../assets/images/success.png" alt="">
								<div>成功</div>
							</div>
							<div class="foonerContent flexrsc">
								<el-checkbox v-model="checked">记住密码</el-checkbox>
							</div>
							<el-button :loading="loading" type="primary" class="login-btn"
								@click.native.prevent="handleLogin">登录</el-button>
						</el-form>
					</div>
				</div>
				<div class="shadow" v-if="showImagCode" @click.stop="toDoing">
					<div class="box" v-if="isMobileFlag">
						<textVerification :l="42" :r="10" :w="310" @verificationSuccessful="verificationSuccessful"
							:h="155" />

					</div>
					<div class="box" v-else>
						<slide-verify :l="42" :r="10" :w="310" :h="155" @success="onSuccess" @fail="onFail"
							@refresh="onRefresh" :sliderText="text"></slide-verify>
					</div>
				</div>
			</div>

		</div>
		<!-- <div class='login-copyright'>BBLXM20240526</div> -->
	</div>
</template>

<script>
	import {
		validUsername
	} from '@/utils/validate'
	import Cookies from 'js-cookie'
	import SlideVerify from './slide-verify'
	import textVerification from './textVerification.vue'
	import api from '@/api/http'
	const IP = window.IP
	import {
		setToken
	} from '@/utils/auth'
	export default {
		name: 'Login',
		data() {
			const validateUsername = (rule, value, callback) => {
				callback()
			}
			const validatePassword = (rule, value, callback) => {
				if (value.length < 6) {
					callback()
				} else {
					callback()
				}
			}
			return {
				isMobileFlag: null,
				showImagCode: false,
				text: '请向右滑到空缺处',
				showImagFlag: false,
				passw: "password",
				passwordShow: false,
				dataSet: true,
				userSet: false,
				headers: true,
				checked: false,
				flag: 1,
				loginForm: {
					username: '',
					password: ''
				},
				loginRules: {
					username: [{
						required: true,
						trigger: 'blur',
						validator: validateUsername
					}],
					password: [{
						required: true,
						trigger: 'blur',
						validator: validatePassword
					}]
				},
				loading: false,
				passwordType: 'password',
				redirect: false,
				loginFlags: false,
			}
		},
		computed: {
			newValue() {
				return this.loginForm.username
			},
			newValueWord() {
				return this.loginForm.password
			}
		},
		components: {
			SlideVerify,
			textVerification
		},
		watch: {
			newValue() {
				this.headers = true
			},
			newValueWord() {
				this.headers = true
			},
			checked(newValue) {
				// console.log(this.checked);
				if (this.checked == true) {
					if (this.loginForm.password && this.loginForm.username) {
						Cookies.set('password', this.loginForm.password)
						Cookies.set('username', this.loginForm.username)
						Cookies.set('checked', true)
						Cookies.set('password', this.loginForm.password, {
							expires: 7,
						});
						Cookies.set('username', this.loginForm.username, {
							expires: 7,
						});
						Cookies.set('checked', true, {
							expires: 7,
						});
					}
				} else {
					Cookies.remove('password')
					Cookies.remove('username')
					Cookies.remove('checked')
				}
			},
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect
					console.log(this.redirect, 'this.redirect')
				},
				immediate: true
			}
		},
		created() {
			this.loginForm.password = Cookies.get('password') || ''
			this.loginForm.username = Cookies.get('username') || ''
			this.checked = Cookies.get('checked') ? true : false;
			this.isMobile()
			const url = window.location.href;
		},
		methods: {
			removeAfterLastOccurrence(str, charToFind) {
				var index = str.lastIndexOf(charToFind);
				if (index !== -1) {
					return str.substring(0, index);
				}
				return str; // 如果字符未找到，返回原字符串
			},
			getQueryParam(url, paramName) {
				if (!url.includes(paramName + '=')) return null;
				const paramString = url.split('?')[1];
				const params = paramString.split('&');
				for (const param of params) {
					const [key, value] = param.split('=');
					if (decodeURIComponent(key) === paramName) {
						return decodeURIComponent(value);
					}
				}
				return null;
			},
			isMobile() {
				this.isMobileFlag = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				)
				// console.log(this.isMobileFlag);
				return this.isMobileFlag
			},
			verificationSuccessful() {
				this.showImagCode = false
				this.showImagFlag = true
			},
			showPass() {
				//点击图标是密码隐藏或显示
				if (this.passw == "text") {
					this.passw = "password";
					this.passwordShow = false;
				} else {
					this.passw = "text";
					this.passwordShow = true;
				};
			},
			toDoing() { // 点击阴影关闭
				this.showImagCode = false
			},
			noDoing() { // 点击图片框
				this.showImagCode = true
			},
			onFail() {},
			onRefresh() {

			},
			onSuccess() {
				console.log('就是这样');
				this.showImagCode = false
				this.showImagFlag = true
				// this.loading = true
				// this.loginState === 0 ? this.accountLogin() : this.phoneLogin()

			},
			// 登录方式切换
			dataMak(item) {
				if (item == 1) {
					this.flag = 1
					this.dataSet = true
					this.userSet = false
				} else {
					this.flag = 2
					this.dataSet = false
					this.userSet = true
				}
			},
			changeUser() {
				this.showImagFlag = false
			},
			handleLogins(item) {
				this.showImagCode = !this.showImagCode
				this.headers = !this.headers
			},
			handleLogin() {
				sessionStorage.clear();
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						if (this.showImagFlag) {
							if (this.loginForm.username === 'admin' && this.loginForm.password ===
								'beihua123456') {
									let params = 
										{
											appKey:'ZoJRm87E',
											appSecret:'ay1bzyyxq4w6dzuzsk0p62xcq0i4eo0h'
										}
								api.login(params).then(res => {
									if(res.status == 200){
										let token = res.data.data["X-Access-Token"];
										// let token = 123456;
										console.log(token,'token')
										setToken(token); 
										this.$store.commit('settings/SET_ELEVATORNUMBER', '0000258543000001')
										Cookies.set('password', this.loginForm.password)
										Cookies.set('username', this.loginForm.username)
										Cookies.set('checked', true)
										Cookies.set('password', this.loginForm.password, {
											expires: 7
										});
										Cookies.set('username', this.loginForm.username, {
											expires: 7
										});
										Cookies.set('checked', true, {
											expires: 7
										});
										
										let routerArr = this.$router.options.routes;
										this.$store.commit('router/updateRouters', routerArr)
										if (this.redirect) {
											this.$router.push({
												path: this.redirect
											})
										} else {
											this.$router.push({
												path: '/'
											})
										}
									}
									console.log(res,'获取X-Access-Token')
								})
								


							} else {
								this.$message({
									message: '账号或密码错误',
									type: 'error'
								})
								this.loading = false
							}
						} else {
							this.$message.error('请先进行验证');
							this.loading = false
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 修复input 背景不协调 和光标变色 */
	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

	$bg: #283443;
	$light_gray: #fff;
	$cursor: #fff;

	@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
		.normal-login-form {
			.el-input input {
				color: #fff;
			}

			.el-input__prefix,
			.el-input__suffix {
				color: #fff !important;
			}
		}
	}



	/* reset element-ui css */
	.login-container {
		background: url('../../assets/images/login/background.png');
		background-size: 100% 100%;
		height: 100%;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;
	}


	.normal-login-form {
		.el-checkbox__label {
			color: #8e8e8e;
			font-size: 16px;
			width: 15px;
			height: 15px;
		}

		.el-checkbox__inner {
			background: rgba(255, 255, 255, 0);
			border: 1px solid #8e8e8e;
		}

		.el-checkbox__input.is-checked+.el-checkbox__label {
			color: rgb(12, 197, 217);
		}

		.el-checkbox__input.is-checked .el-checkbox__inner::after {
			border-color: rgb(12, 197, 217);
		}

		.el-checkbox__input.is-focus .el-checkbox__inner {
			border: 1px solid #8e8e8e;
		}

		.el-checkbox__input.is-checked .el-checkbox__inner,
		.el-checkbox__input.is-indeterminate .el-checkbox__inner {
			background-color: rgba(255, 255, 255, 0);
			border-color: rgb(12, 197, 217);
		}

		.el-input__prefix {
			display: -webkit-box;
			display: -moz-box;
			display: -ms-box;
			display: -o-box;
			display: box;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flexbox;
			display: -o-flex;
			display: flex;

			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-moz-box-orient: vertical;
			-moz-box-direction: normal;
			flex-direction: column;
			-webkit-flex-direction: column;

			-webkit-justify-content: center;
			justify-content: center;
			-moz-box-pack: center;
			-webkit--moz-box-pack: center;
			box-pack: center;

			align-items: center;
			-webkit-align-items: center;
			box-align: center;
			-moz-box-align: center;
			-webkit-box-align: center;
			margin-left: 5px;

			img {
				width: 24px;
				height: 24px;
			}
		}

		.el-input__suffix {
			display: -webkit-box;
			display: -moz-box;
			display: -ms-box;
			display: -o-box;
			display: box;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flexbox;
			display: -o-flex;
			display: flex;

			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-moz-box-orient: vertical;
			-moz-box-direction: normal;
			flex-direction: column;
			-webkit-flex-direction: column;

			-webkit-justify-content: center;
			justify-content: center;
			-moz-box-pack: center;
			-webkit--moz-box-pack: center;
			box-pack: center;

			align-items: center;
			-webkit-align-items: center;
			box-align: center;
			-moz-box-align: center;
			-webkit-box-align: center;

			.el-input__suffix-inner {
				display: -webkit-box;
				display: -moz-box;
				display: -ms-box;
				display: -o-box;
				display: box;
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flexbox;
				display: -o-flex;
				display: flex;

				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-moz-box-orient: vertical;
				-moz-box-direction: normal;
				flex-direction: column;
				-webkit-flex-direction: column;

				-webkit-justify-content: center;
				justify-content: center;
				-moz-box-pack: center;
				-webkit--moz-box-pack: center;
				box-pack: center;

				align-items: center;
				-webkit-align-items: center;
				box-align: center;
				-moz-box-align: center;
				-webkit-box-align: center;

				img {
					width: 20px;
					height: 20px;
				}
			}
		}

		.el-input {
			display: inline-block;
			height: 44px;
			width: 100%;

			input {
				background: transparent;
				border: 0px;
				-webkit-appearance: none;
				border-radius: 0px;
				padding: 12px 5px 12px 42px;
				height: 47px;
				caret-color: $cursor;

				&:-webkit-autofill {
					-webkit-box-shadow: 0 0 0px 1000px rgba(245, 241, 241, 0) inset;
					-webkit-text-fill-color: #fff;
				}

				&:-webkit-autofill {
					-webkit-box-shadow: 0 0 0px 1000px rgba(245, 241, 241, 0) inset;
					-webkit-text-fill-color: #fff;
				}

				&:-internal-autofill-selected {
					-webkit-text-fill-color: #ffffff !important;
					transition: background-color 5000s ease-in-out 10s !important;
				}

				&:-internal-autofill-previewed {
					-webkit-text-fill-color: #ffffff !important;
					transition: background-color 5000s ease-in-out 10s !important;
				}
			}

			input:-webkit-autofill,
			textarea:-webkit-autofill,
			select:-webkit-autofill {
				-webkit-text-fill-color: #ededed !important;
				-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
				background-color: transparent;
				background-image: none;
				transition: background-color 50000s ease-in-out 0s;
				//背景色透明  生效时长  过渡效果  启用时延迟的时间
			}

			input {
				background-color: transparent;
			}
		}
	}

	.login-btn {
		width: 100%;
		margin-top: 28px;
		height: 45px;
		padding: 0;
		font-size: 18px;
	}

	@media (max-width: 850px) {
		.login-left {
			display: none;
		}
	}
</style>
<style lang='scss' scoped>
	.rightBox {
		font-size: 22px;
		margin: 20px 0 !important;
		text-align: center;
		color: #fff;
	}

	.boxTbale {
		width: 100%;
		height: 40px;
		color: #888888;
		border-radius: 4px;
		text-align: center;
		line-height: 40px;
		margin-bottom: 20px !important;
		margin-top: 30px !important;
		cursor: pointer;
		background: rgba(245, 241, 241, 0.1);

		span {
			margin-left: 20px !important;
		}

		img {
			width: 24px;
			height: 24px;
		}
	}

	.boxTbales {
		width: 100%;
		height: 40px;
		border-radius: 4px;
		text-align: center;
		line-height: 40px;
		color: #888888;
		margin-bottom: 20px !important;
		margin-top: 30px !important;
		background: rgba(22, 96, 49, 0.3);
		color: #fff;
		cursor: pointer;

		img {
			width: 24px;
			height: 24px;
			margin-right: 18px !important;
			// margin: 10px;
		}
	}


	.shadow {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
		// background: rgba(0, 0, 0, 0.4);

		.box {
			width: 310px;
			height: 215px;
			position: absolute;
			top: 40%;
			left: 75%;
			transform: translate(-50%, -50%);
			overflow: hidden;
			background-color: #fff;
		}

		.leftBox {
			left: 25% !important;
		}
	}

	.login-box {
		position: relative;
		width: 100%;
		height: 100%;

		.login-left {
			width: 50%;
			height: 100%;

			.left-title {
				margin-right: 425px;
				margin-top: 50px;

				div {
					font-size: 26px;
					color: #fff;
				}

				img {
					width: 80px;
					height: 80px;
				}
			}

			.left-intro {
				font-size: 16px;
				color: #c6c6c7;
				margin-top: 10px;
				margin-right: 400px;
			}
		}

		.login-right {
			width: 50%;
			height: 100%;
		}


	}

	.login-form {
		width: 400px;
		height: 430px;
		padding: 10px 51.5px !important;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		box-sizing: border-box;

		border: 1px solid rgba(94, 94, 94, 0.45);
	}

	.normal-login-form {
		background: rgba(35, 35, 35, 0.15);
	}
</style>